<template>
  <div class="min-h-screen bg-gray-50 py-8">
    <div class="container mx-auto px-4">
      <!-- 页面标题 -->
      <div class="text-center mb-8">
        <h1 class="text-4xl font-bold text-gray-800 mb-4">JavaScript 事件循环详解</h1>
        <p class="text-lg text-gray-600 max-w-4xl mx-auto">
          通过各种实际案例深入理解 JavaScript 事件循环机制，包括 nextTick、requestAnimationFrame
          等概念
        </p>
      </div>

      <!-- 导航菜单 -->
      <div class="bg-white rounded-lg shadow-lg mb-8 p-6">
        <h2 class="text-2xl font-semibold mb-4 text-gray-800">演示目录</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <button
            @click="activeTab = 'nexttick'"
            :class="getTabClass('nexttick')"
            class="tab-button"
          >
            <div class="flex items-center justify-center mb-3">
              <div
                class="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center text-white font-bold text-lg"
              >
                1
              </div>
            </div>
            <div class="text-lg font-medium">Vue nextTick</div>
            <div class="text-sm text-gray-500 mt-2">DOM 更新与 nextTick 机制演示</div>
          </button>

          <button @click="activeTab = 'raf'" :class="getTabClass('raf')" class="tab-button">
            <div class="flex items-center justify-center mb-3">
              <div
                class="w-10 h-10 bg-pink-500 rounded-full flex items-center justify-center text-white font-bold text-lg"
              >
                2
              </div>
            </div>
            <div class="text-lg font-medium">requestAnimationFrame</div>
            <div class="text-sm text-gray-500 mt-2">渲染帧与动画演示</div>
          </button>
        </div>

        <div class="mt-6 pt-4 border-t">
          <button
            @click="activeTab = 'visualizer'"
            :class="getTabClass('visualizer')"
            class="tab-button special-tab"
          >
            <div class="flex items-center justify-center mb-3">
              <div
                class="w-12 h-12 bg-gradient-to-r from-cyan-500 to-blue-500 rounded-full flex items-center justify-center text-white font-bold text-xl"
              >
                ✨
              </div>
            </div>
            <div class="text-xl font-medium">交互式可视化</div>
            <div class="text-base text-gray-500 mt-2">事件循环执行过程可视化演示</div>
          </button>
        </div>
      </div>

      <!-- 内容区域 -->
      <div class="space-y-8">
        <!-- Vue nextTick 演示 -->
        <div v-if="activeTab === 'nexttick'">
          <NextTickDemo />
        </div>

        <!-- requestAnimationFrame 演示 -->
        <div v-if="activeTab === 'raf'">
          <AnimationFrameDemo />
        </div>

        <!-- 可视化演示 -->
        <div v-if="activeTab === 'visualizer'">
          <EventLoopVisualizer />
        </div>
      </div>

      <!-- 总结说明 -->
      <div class="mt-8 bg-white rounded-lg shadow-lg p-6">
        <h3 class="text-2xl font-semibold mb-4 text-gray-800">事件循环核心要点</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <h4 class="text-lg font-semibold mb-3 text-blue-600">执行顺序</h4>
            <ol class="list-decimal list-inside space-y-2 text-sm">
              <li>执行同步代码（调用栈）</li>
              <li>执行所有微任务（Promise.then、queueMicrotask、nextTick）</li>
              <li>执行一个宏任务（setTimeout、setInterval、DOM 事件）</li>
              <li>执行 requestAnimationFrame（如果有）</li>
              <li>渲染页面（如果需要）</li>
              <li>重复步骤 2-5</li>
            </ol>
          </div>

          <div>
            <h4 class="text-lg font-semibold mb-3 text-green-600">优化建议</h4>
            <ul class="list-disc list-inside space-y-2 text-sm">
              <li>避免长时间运行的同步代码阻塞主线程</li>
              <li>合理使用微任务处理状态更新</li>
              <li>动画优先使用 requestAnimationFrame</li>
              <li>大量 DOM 操作时使用 nextTick 批量处理</li>
              <li>防止微任务无限循环</li>
              <li>理解不同任务的优先级关系</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import NextTickDemo from './components/NextTickDemo.vue'
import AnimationFrameDemo from './components/AnimationFrameDemo.vue'
import EventLoopVisualizer from './components/EventLoopVisualizer.vue'

const activeTab = ref('nexttick')

const getTabClass = (tab: string) => {
  return activeTab.value === tab
    ? 'bg-blue-500 text-white shadow-lg'
    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
}
</script>

<style scoped lang="scss">
.tab-button {
  padding: 20px;
  border-radius: 12px;
  transition: all 0.3s ease;
  text-align: center;
  border: none;
  cursor: pointer;
  transform: scale(1);

  &:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  &.special-tab {
    grid-column: 1 / -1;
    max-width: 500px;
    margin: 0 auto;
    padding: 24px;
  }
}

.container {
  max-width: 1200px;
}
</style>
